<%--
  Created by IntelliJ IDEA.
  User: MSI-PC
  Date: 2021/8/24
  Time: 1:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <% String path = request.getContextPath();%>
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!-- 引入本地css -->
<%--  <link rel="stylesheet" type="text/css" href="<%=path%>/css/czc_index.css" />--%>
  <link rel="stylesheet" type="text/css" href="https://www.edisoncgh.com/resources/czc_index.css"/>

  <!-- 引入font-awesome -->
  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet">

  <!-- 引入bootst图标库 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

  <meta charset="utf-8">
  <link rel="icon" type="image/x-icon" href="<%=path%>/img/256x.ico" />
  <title>关于</title>
</head>

<body>

<!-- 头部工具栏 -->
<div class="container">
  <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">czcBlog</a>
      </div>

      <div>
        <ul class="nav navbar-nav">
          <li><a href="${pageContext.request.contextPath}/articleOption/indexArticle"><i class="fa fa-home"></i> 首页</a></li>
          <li><a href="${pageContext.request.contextPath}/archive.jsp"><i class="fa fa-list-ul"></i> 归档</a></li>
          <li><a href="${pageContext.request.contextPath}/links.jsp"><i class="fa fa-link"></i> 友链</a></li>
          <li><a href="${pageContext.request.contextPath}/about.jsp"><i class="fa fa-info-circle"></i> 关于</a></li>

        </ul>
      </div>

      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            操作
            <b class="caret"></b>
          </a>
          <ul class="dropdown-menu">
            <li><a href="${pageContext.request.contextPath}/backstage.jsp"><i class="fa fa-cog"></i> 后台</a></li>
            <li><a href="${pageContext.request.contextPath}/loginCheck/login"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
          </ul>
        </li>

      </ul>

      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-primary">检索 <i class="fa fa-search"></i></button>
      </form>

    </div>
  </nav>
</div>

<!-- 抬头内容 -->
<div class="container">
  <div class="page-header text-center">
    <h1>CZC-Blog System</h1>
    <small>A Low-key and Simple Blog</small>
  </div>
</div>

<!-- 页面主体 -->
<div class="container">
  <div class="row">
    <!-- 占位 -->
    <div class="col-md-2"></div>

    <!-- 文章盒子 -->
    <div class="col-md-8 ArticleBox ArticleBox-content">
      <div class="text-center">
        <h3>关于</h3>
        <h5>About The Blog Owner</h5>
      </div>

      <div>
        <p>
          内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </p>
        <p>
          内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </p>
        <p>
          内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </p>
        <p>
          内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </p>
      </div>
    </div>

    <!-- 占位 -->
    <div class="col-md-2"></div>
  </div>

</div>
</body>

<!-- 页尾 -->
<footer class="text-center">
  <!-- 页脚内容 -->
  <div class="container">
    <p>©2021 CZC</p>
  </div>
  <span id="hitokoto">让我想点骚话....</span>
  <script>
    $.ajax({
      type:"get",
      url:"https://v1.hitokoto.cn/",
      success: function(res) {
        document.getElementById("hitokoto").innerText = res.hitokoto;
        // console.log(res.hitokoto);
      },
      error: function() {
        document.getElementById("hitokoto").innerText = "骚话加载失败QAQ";
      }
    });
  </script>
</footer>
</html>
